<script setup lang="ts">
import { usePlayerStore } from "@/stores/player";

const visible = defineModel("show");
const playerStore = usePlayerStore();

const playSong = (index: number) => {
  const song = playerStore.queue[index];
  playerStore.playSong(song);
};
</script>

<template>
  <el-drawer
    v-model="visible"
    title="播放队列"
    direction="rtl"
    size="400px"
    destroy-on-close
    class="playlist-drawer"
  >
    <div class="px-2">
      <div
        v-if="playerStore.queue.length === 0"
        class="flex items-center justify-center h-40 text-gray-400"
      >
        暂无歌曲
      </div>
      <div v-else class="song-list">
        <div
          v-for="(song, index) in playerStore.queue"
          :key="song.id"
          class="song-item group"
          :class="{ active: index === playerStore.currentIndex }"
          @click="playSong(index)"
        >
          <img :src="song.cover" class="song-cover" />
          <div class="song-info">
            <div class="song-name">{{ song.name }}</div>
            <div class="song-artist">{{ song.artist }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<style scoped>
.playlist-drawer :deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.song-list {
  margin: 8px -8px;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.song-item:hover {
  background-color: #f5f5f5;
}

.song-item.active {
  background-color: #fef2f2;
  color: #d92323;
}

.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 12px;
  object-fit: cover;
}

.song-info {
  flex: 1;
  overflow: hidden;
}

.song-name {
  font-size: 14px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-artist {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
